<template>
  <div class="userContainer" :style="'min-height: ' + docheight + 'px'">
    <div v-if="!showTimeOut && showCont">
      <div class="centerTop">
        <div class="userCont">
          <div class="userImg">
            <img :src="userInfo.user_info.head_img + ossSrc" />
          </div>
          <div class="userInfo">
            <div class="userName">{{ userInfo.user_info.nick_name }}</div>
          </div>
        </div>
        <div class="topCard">
          <div class="cardItem">
            <div class="cardName">消费金额</div>
            <div class="cardVal">{{ userInfo.user_info.order_money }}</div>
          </div>
          <div class="cardLine"></div>
          <div class="cardItem">
            <div class="cardName">累计订单</div>
            <div class="cardVal">{{ userInfo.user_info.order_num }}</div>
          </div>
        </div>
      </div>
      <div class="orderList" v-if="orderList.length > 0">
        <div class="orderTitle">历史订单</div>
        <div class="orderItem" :key="index" v-for="(item, index) in orderList">
          <div class="shopTop">
            <div class="shopNameCont">
              <div class="shopName">订单号:{{ item.order_number }}</div>
            </div>
            <div class="orderStatus">
              <span v-if="item.order_status == 1">待付款</span>
              <span v-if="item.order_status == 2">待接单</span>
              <span v-if="item.order_status == 3">待服务</span>
              <span v-if="item.order_status == 5">已完成</span>
              <span v-if="item.order_status == 6">已关闭</span>
              <span v-if="item.order_status == 7">已退款</span>
            </div>
          </div>
          <div class="goodsList">
            <div class="goodsItem" @click="toDetail(item)">
              <div class="flexCont">
                <div class="goodsImg">
                  <img :src="item.package_cover + ossSrc" />
                </div>
                <div class="goodsInfo">
                  <div class="goodsName">{{ item.package_name }}</div>
                  <div class="goodsType">
                    <div class="goodsTypeItem">
                      技师：{{ item.technician_nick_name }}
                    </div>
                    <div class="contNum">x{{ item.num }}</div>
                  </div>
                  <div class="orderTime">预约时间：{{ item.service_time }}</div>
                </div>
              </div>
              <div class="underInfo">
                <div class="userTitle">
                  订单信息
                </div>
                <div class="userForm">
                  <div class="userName">下单总费：</div>
                  <div class="userText">¥{{ item.order_total_price }}</div>
                </div>
                <div class="userForm">
                  <div class="userName">项目时长：</div>
                  <div class="userText">
                    {{ Number(item.package_time) * Number(item.num) }}分钟
                  </div>
                </div>
                <div class="userForm" v-if="item.jz_num">
                  <div class="userName">总计加钟：</div>
                  <div class="userText">{{ item.jz_num }}个</div>
                </div>
                <div class="userForm" v-if="item.jz_num">
                  <div class="userName">加钟费用：</div>
                  <div class="userText">¥{{ item.jz_money }}</div>
                </div>
              </div>
              <div class="underInfo" @click="toCenter(item)">
                <div class="userTitle">
                  客户信息
                </div>
                <div class="userForm">
                  <div class="userName">客户姓名：</div>
                  <div class="userText">{{ item.user_name }}</div>
                </div>
                <div class="userForm">
                  <div class="userName">联系电话：</div>
                  <div class="userText">{{ item.user_phone }}</div>
                </div>
                <div class="userForm">
                  <div class="userName">服务地址：</div>
                  <div class="userText">
                    {{ item.service_address }}{{ item.house_number }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <nodata v-if="orderList.length == 0" text="该客户暂无订单~"></nodata>
    </div>
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
    <toast
      v-model="showToast"
      width="50%"
      position="middle"
      type="text"
      :time="1000"
      >{{ showText }}</toast
    >
  </div>
</template>

<script>
import { Toast } from "vux";
import { my } from "@/http/api";
import { orderList } from "@/http/api";
import nodata from "@/components/public/nodata";

import getLoad from "@/components/public/getLoad";
import getTimeOut from "@/components/public/getTimeOut";
export default {
  components: { getTimeOut, getLoad, Toast, nodata },
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      showText: "",
      showToast: false,
      listArr: [
        { val: "消费记录", icon: "icon-xiaofeijilu" },
        { val: "关于我们", icon: "icon-guanyu" }
        // { val: "技师招募", icon: "icon-zhaopin" },
        // { val: "商务合作", icon: "icon-hezuo" }
      ],
      userInfo: {},
      orderList: []
    };
  },
  methods: {
    getData() {
      let data = {
        user_id: this.$route.query.id
      };
      my(data)
        .then(res => {
          if (res.data.code == 1) {
            this.userInfo = res.data.data;
            this.orderList = res.data.data.order_info;
          } else {
            this.showToast = true;
            this.showText = "用户信息获取失败";
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    saveTechFn() {
      this.$router.push({ path: "/saveTech" });
    },
    listFn(item) {
      if (item.val == "关于我们") {
        this.$router.push({ path: "/about" });
      } else if (item.val == "消费记录") {
        this.$router.push({ path: "/record" });
      } else if (item.val == "技师招募") {
        this.$router.push({ path: "/techJoin" });
      } else if (item.val == "商务合作") {
        this.$router.push({ path: "/shopJoin" });
      }
    }
  },
  created() {
    this.getData();
  }
};
</script>

<style scoped lang="less">
.userContainer {
  // background-color: #FFFEF2;
  width: 100%;
  box-sizing: border-box;

  .centerTop {
    width: 100%;
    background-image: linear-gradient(to bottom, #4fc763, #67d377);
    padding: 1.5rem 4% 1.25rem;
    box-sizing: border-box;
    .userCont {
      width: 100%;
      // align-items: center;
      // display: flex;
      .userImg {
        width: 4rem;
        height: 4rem;
        position: relative;
        margin: 0 auto;
        border-radius: 50%;
        .boyIcon {
          background-color: rgb(103, 83, 218);
        }
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .userInfo {
        color: rgb(240, 240, 240);
        text-align: center;
        margin-top: 0.75rem;
        .userName {
          font-size: 0.8rem;
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-weight: bold;
        }
        .userTel {
          font-size: 0.6rem;
          margin-top: 0.25rem;
          display: flex;
          align-items: center;
        }
        .userDes {
          width: 100%;
          margin-top: 0.25rem;
          font-size: 0.6rem;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
      .seticon {
        margin-right: 1.5rem;
        font-size: 1.2rem;
        color: white;
      }
    }
    .topCard {
      width: 100%;
      display: flex;
      justify-self: center;
      margin-top: 1rem;
      align-items: center;
      .cardLine {
        height: 1.5rem;
        width: 1px;
        background-color: #ddd;
      }
      .cardItem {
        width: 100/2%;
        text-align: center;
        padding: 0.5rem 0;
        color: white;
        .cardName {
          font-size: 0.7rem;
        }
        .cardVal {
          font-size: 1rem;
          font-weight: bold;
          margin-top: 0.4rem;
        }
      }
    }
  }
  .orderList {
    width: 100%;
    padding: 0.25rem 4%;
    background-color: #fff;
    margin-top: -0.75rem;
    box-sizing: border-box;
    padding-top: 0.75rem;
    border-radius: 0.75rem 0.75rem 0 0;
    .orderTitle {
      font-weight: bold;
      margin-bottom: 0.75rem;
    }
    .orderItem {
      width: 100%;
      background-color: #f8f8f8;
      margin-bottom: 0.75rem;
      border-radius: 0.25rem;
      padding: 0 0.75rem 1rem;
      box-sizing: border-box;
      .shopTop {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        .shopNameCont {
          flex: 1;
          width: 0.5rem;
          display: flex;
          padding: 0.75rem 0;
          align-items: center;
          margin-right: 0.5rem;
          .shopicon {
            font-size: 1.1rem;
            margin-right: 0.25rem;
          }
          .shopName {
            font-size: 0.7rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .icon-jinrujiantou {
            font-size: 0.8rem;
            position: relative;
          }
        }
        .orderStatus {
          font-size: 0.6rem;
          color: #4fc763;
        }
      }
      .goodsList {
        width: 100%;
        .goodsItem {
          width: 100%;
          margin-bottom: 0.5rem;

          .flexCont {
            display: flex;
            align-items: center;
            .goodsImg {
              width: 4rem;
              height: 4rem;
              overflow: hidden;
              border-radius: 0.25rem;
              margin-right: 0.5rem;
              img {
                width: 100%;
              }
            }
            .goodsInfo {
              width: 0.5rem;
              flex: 1;
              display: flex;
              flex-direction: column;
              height: 4rem;
              justify-content: space-between;
              .goodsName {
                width: 100%;
                line-height: 1rem;
                font-size: 0.7rem;
                overflow: hidden; //超出的文本隐藏
                text-overflow: ellipsis; //溢出用省略号显示
                white-space: nowrap;
              }
              .orderTime {
                font-size: 0.6rem;
                color: #666;
              }
              .goodsType {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .goodsNumCont {
                  display: flex;
                  height: 1rem;
                  // background-color: #fff;
                  line-height: 1rem;
                  color: #999;
                  font-size: 0.6rem;
                  align-items: center;
                }
                .goodsTypeItem {
                  // padding: 0.1rem 0.5rem;
                  background-color: #fff;
                  font-size: 0.6rem;
                  height: 1rem;
                  padding: 2px 5px;
                  line-height: 1rem;
                  border-radius: 0.15rem;
                  color: #999;
                }
                .contNum {
                  color: #666;
                }
                .userBtn {
                  padding: 0.25rem 0.75rem;
                  font-size: 0.6rem;
                  background-color: #4fc763;
                  color: #fff;
                  border-radius: 1rem;
                }
              }
              .goodsInfoPrice {
                color: #999;
                font-size: 0.6rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
            }
          }
          .underInfo {
            border-top: 1px dashed #ddd;
            margin-top: 0.75rem;
            padding-top: 0.75rem;
            .userTitle {
              font-weight: bold;
            }
            .userForm {
              display: flex;
              align-items: flex-start;
              margin-top: 0.25rem;
              justify-content: space-between;
              .userText {
                color: #666;
              }
            }
          }
        }
      }
      .orderSumCont {
        font-size: 0.6rem;
        text-align: right;
        color: #333;
        .priceVal {
          position: relative;
          top: 0.1rem;
          color: #4fc763;
        }
      }
      .orderTip {
        font-size: 0.6rem;
        color: #999;
        text-align: right;
        margin-top: 0.5rem;
      }
      .goodsCtrl {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 0.75rem;
        justify-content: flex-end;
        .orderBtn {
          padding: 0.35rem 0;
          width: 25%;
          text-align: center;
          border-radius: 1rem;
          font-size: 0.6rem;
          box-sizing: border-box;
          margin-left: 0.5rem;
        }
        .greenBtn {
          border: 1px solid #4fc763;
          color: #4fc763;
        }
        .pinkBtn {
          border: 1px solid #4fc763;
          color: #4fc763;
        }
        .blackBtn {
          border: 1px solid #999;
          color: #666;
        }
      }
      .orderDes {
        border-top: 1px dashed #ebebeb;
        padding-top: 0.75rem;
        color: #666;
        font-size: 0.6rem;
      }
    }
  }
  .loadMore {
    text-align: center;
    padding: 0.75rem 0;
    font-size: 0.6rem;
    color: #999;
  }
}
</style>
